<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1.0 minimum-scale=1.0 user-scaleEnable=no">
    <title>常用的单位</title>
    
    <style>
        section{
            background-color: orange;
            font-size: 2em;
            /*width: 500px;*/
        }

        div{
            background-color: red;
            margin: 30px auto;
            height: 5px;
        }

        div:nth-child(1){
            /*px像素*/
            width: 10px;

        }

        div:nth-child(2){
            /*em是根据当前父元素中字体的宽度作为单位.
            1em就代表父元素中一个字体宽度的大小
            n em就代表父元素中n倍的一个字体宽度的大小
            特别注意:
            em是相对父元素的字号,同时,还会把所有上层元素中设置有em的数值依次相乘
            即:size = 所有父元素的em值相乘 * n
            */
            width: 2.5em;
        }

        div:nth-child(3){
            /*rem是参照根元素(html标签)设置的字号来作为度量单位.
            html标签 默认字号是16px
            rem是常用的单位.特别是对于不同设备适配的时候.
            另外,在移动设备上广泛使用.*/
            width: 3rem;
        }

        div:nth-child(4){
            /*百分比,根据父元素来设置当前元素的尺寸.常用于响应式布局.*/
            width: 10%;
        }

        div:nth-child(5){
            /*cm和mm也是电脑常用的单位,多用于打印*/
            width: 10cm;
            width: 10mm;
        }

        div:nth-child(6){
            /*in:英寸*/
            width: 5in;
        }

        div:nth-child(7){
            /*pt: 磅*,常用的打印单位.*/
            width: 10pt;        
        }

        div:nth-child(8){
            /*vw:view width 指的是加载当前页面的视窗的宽度
            vh:view height 指的是加载当前页面的视窗的高度.
            n vw:就代表n/100*当前视窗的宽度
            n vh:同理.
            使用vw,hw时需要设置viewport

            需要注意跟n%的区别.vw,vh相对于视窗,百分比相对于父元素.
            */
            width: 50vw;
        }

    </style>
</head>
<body>


    <section>
        <div></div>
        <div></div> 
        <div></div> 
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

</body>
</html>